import G6 from '@antv/g6'

// hello world 最简单的配置
export function helloWorld(arg) {
  const { graphId } = arg
  return {
    container: graphId,
  }
}

// 添加一些简单配置
export function simplicity(arg) {
  const { graphId } = arg
  const container = document.getElementById(graphId)
  return {
    container: graphId,
    width: container.scrollWidth,
    height: container.scrollHeight,
    layout: {
      type: "force",
      preventOverlap: true,
      nodeSize: 120,
    },
    modes: {
      default: ['zoom-canvas', 'drag-canvas', 'drag-node']
    },
    defaultNode: {
      size: 40,
    },
  }
}

// 确定符合项目的版本
export function proSimply(arg) {
  const { graphId, graphData, args } = arg
  const container = document.getElementById(graphId)
  // const len = graphData?.nodes?.length as number
  const config = {
    container: graphId,
    width: container.scrollWidth,
    height: container.scrollHeight,
    modes: {
      default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
    },
    // fitView: true,
    layout: {
      type: 'force',
      // type: 'force2',
      // type: 'gForce',
      // type: 'forceAtlas2',
      preventOverlap: true,
      linkDistance: 120,
      nodeSize: 240,
    },
    defaultNode: {
      size: 40,
    },
    defaultEdge: {
      style: {
        stroke: '#96e6ff',
        lineWidth: 1,
        strokeOpacity: 1,
        startArrow: args.tabCur === "1",
        endArrow: args.tabCur === "0"
      },
      type: "quadratic",
    },
    plugins: [
      new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        itemTypes: ['node'],
        getContent: (e) => {
          const outDiv = document.createElement('div')
          const d = e?.item?.getModel()
          outDiv.innerHTML = `
            <ul>
              <li>名称：${d.name || ''}</li>
              <li>类型：${d.typeName || ''}</li>
            </ul>`
          return outDiv
        },
      })
    ]
    // nodeStateStyles: {
    //   highlight: {
    //     fill: '#ffffff',
    //     fillOpacity: 0.5,
    //     stroke: '#96e6ff'
    //   },
    //   dark: {
    //     fillOpacity: 0.1,
    //     fill: '#ffffff',
    //     stroke: '#ffffff',
    //     strokeOpacity: 0.1
    //   }
    // },
  }
  return config
}

// 节点与边共同处理方案
export function nodeEdge(ne, type) {
  if ('类型转换' === type) {
    if (ne.source) ne.source = String(ne.source)
    if (ne.target) ne.target = String(ne.target)
    if (ne.id) ne.id = String(ne.id)
  }
}